<template>
  <div>
    <div style="position: relative;">
      <el-button type="primary" style="top: 0px; right: 0; position: absolute;" @click="handleSubmit">
        {{ $i18n.t("common.submit") }}
      </el-button>
    </div>
    <div class="layoutTable direction">
      <div class="top">
        <h3>{{ $i18n.t("mesLoadMaterialVerification.baseInfo") }}</h3>
        <ele-form v-model="formData" v-bind="editTableFormDesc" ref="form"> </ele-form>
      </div>
      <div class="right">
        <ele-table-batch-editor ref="table" :column="columns" v-model="tableData" :operateList="operateList" :isShowAddBtn="true" @handleOperateEvent="handleOperateEvent">
          <template v-slot:tableTitle>
            <h3>{{ $i18n.t("mesLoadMaterialVerification.detailList") }}</h3>
          </template>
        </ele-table-batch-editor>
      </div>
    </div>
  </div>
</template>
<script>
import { editTableRowConfig, editTableFormDesc } from './config'
import { rowBatchCreate, getStatusList } from '@/api/loadMaterial/mesLoadMaterialVerificationDetail'
import { getInfo } from '@/api/loadMaterial/mesLoadMaterialVerification'

export default {
  data() {
    return {
      formData: {},
      editTableFormDesc,
      isLoading: false,
      // 列表头按钮配置
      operateList: [
        {
          name: $i18n.t("common.add"),
          type: 'primary',
          icon: 'el-icon-circle-plus-outline',
          handleName: 'add' //点击时返回的标识
        }
      ],
      // 表格数据
      tableData: [],

      // 表格列
      columns: [
        {
          type: 'index'
        },
        // {
        //   prop: 'verificationId',
        //   label: '外键(mes_loadmaterial_verification)',
        //   component: 'el-input-number'
        // },
        // {
        //   prop: "saleCode",
        //   label: "销售订单编码",
        //   component: "el-input",
        // },
        {
          prop: 'planCode',
          label: $i18n.t("mesLoadMaterialVerification.planCode"),
          component: 'el-input'
        },
        {
          prop: 'orderCode',
          label: $i18n.t("mesLoadMaterialVerification.orderCode"),
          component: 'el-input'
        },
        {
          prop: 'packageCode',
          label:$i18n.t("mesLoadMaterialVerification.packingBoxCode"),// '包装箱码(一级)',
          component: 'el-input'
        },
        {
          prop: 'boxCode',
          label:$i18n.t("mesLoadMaterialVerification.boxCode"),//  '箱码(二级)',
          component: 'el-input'
        },
        {
          prop: 'barcode',
          label: $i18n.t("mesLoadMaterialVerification.barcode"),
          component: 'el-input'
        },
        {
          prop: 'batchNo',
          label: $i18n.t("mesLoadMaterialVerification.batchNo"),
          component: 'el-input'
        },
        {
          prop: 'unit',
          label: $i18n.t("mesLoadMaterialVerification.unit"),
          component: 'el-input'
        },
        {
          prop: 'owner',
          label: $i18n.t("mesLoadMaterialVerification.owner"),
          component: 'el-input'
        },
        {
          prop: 'version',
          label: $i18n.t("mesLoadMaterialVerification.version"),
          component: 'el-input'
        },
        {
          prop: 'prodCode',
          label: $i18n.t("mesLoadMaterialVerification.prodCode"),
          component: 'el-input'
        },
        {
          prop: 'prodName',
          label: $i18n.t("mesLoadMaterialVerification.prodName"),
          component: 'el-input'
        },
        {
          prop: 'customerCode',
          label: $i18n.t("mesLoadMaterialVerification.customerCode"),
          component: 'el-input'
        },
        {
          prop: 'quantity',
          label: $i18n.t("mesLoadMaterialVerification.quantity"),
          component: 'el-input-number'
        },
        {
          prop: 'remark',
          label: $i18n.t("mesLoadMaterialVerification.remark"),
          component: 'el-input'
        },
        {
          prop: 'factoryCode',
          label: $i18n.t("mesLoadMaterialVerification.factoryCode"),
          component: 'el-input'
        },
        {
          prop: 'operate',
          label: $i18n.t("common.operation"),
          width: 100,
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={editTableRowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  created() {
    // 发送请求获取外键及关联字段信息
    getInfo(this.$route.query.id)
      .then((res) => {
        this.editTableFormDesc.disabled = true
        this.formData = {
          verificationId: res.data.result.id,
          verificationCode: res.data.result.verificationCode
        }
      })
      .finally(() => {
        this.isLoading = false
      })
  },
  methods: {
    //顶部操作按钮事件
    handleOperateEvent(data) {
      const fnc = {
        add: () => {
          this.tableData = [...this.tableData, {}]
        }
      }
      fnc[data.handleName]()
    },
    //行操作事件
    rowOperate(data) {
      console.log(data)
      this.tableData.splice(data.$index, 1)
    },
    //提交事件
    handleSubmit() {
      //如果表单有必填项 使用 validate() 检验，如果没有校验可直接提交
      //表单的校验需开发者自己做循环校验
      const data = this.tableData.map((d) => (d = { ...d, ...this.formData }))
      rowBatchCreate(data).then((res) => {
        const message = res.data.message
        this.$message.success(message || $i18n.t("common.addSuccess"))
        this.clear()
      })
    },
    clear() {
      this.formData = {}
      this.tableData = []
    }
  }
}
</script>
<style lang="scss" scoped>
.direction {
  flex-direction: column;
}
.layoutTable {
  display: flex;
  .top {
    width: 100%;
  }
  .left {
    width: 300px;
  }
  .right {
    flex: 1;
  }
}
</style>
